<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Update App</title>
</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">

		<tiles:putAttribute name="body">

			<logic:empty name="username" scope="session">
				<logic:forward name="home" />
			</logic:empty>

			<logic:equal name="role" scope="session" value="Member">
				<logic:forward name="home" />
			</logic:equal>
			<html:form action="/updateAppAction" method="post"
				styleId="uploadForm" enctype="multipart/form-data">

				<div class="col-xs-12 col-md-8 col-md-offset-2">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h3 class="panel-title">
								<i class="fa fa-cloud-upload"></i>Update App
							</h3>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-xs-6 col-sm-6 col-md-6">

									App Name
									<div class="form-group">

										<div class="input-group">

											<html:text property="appName" styleClass="form-control"
												styleId="appName"></html:text>

											<span class="input-group-addon primary"><span
												class="fa fa-check-square"></span></span>

										</div>



									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">

									App avatar
									<div class="form-group">


										<div class="col-xs-8" style="padding: 0px">
											<input id="uploadAvt" placeholder="Choose File"
												class="form-control" disabled="disabled" />
										</div>

										<div class="fileUpload btn btn-primary">
											<span>Upload</span>
											<html:file property="appAvatar" styleClass="upload"
												styleId="appavatar"></html:file>


										</div>



									</div>




								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">
									Price:

									<div class="form-group">

										<div class="input-group">

											<html:text property="price" styleClass="form-control"
												styleId="price" />

											<span class="input-group-addon warning"><span
												class="fa fa-dollar"></span></span>
										</div>



									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">

									Application upload:

									<div class="form-group">


										<div class="col-xs-8" style="padding: 0px">
											<input id="uploadFile" placeholder="Choose File"
												class="form-control" disabled="disabled" />
										</div>

										<div class="fileUpload btn btn-primary">
											<span>Upload</span>
											<html:file styleId="appdata" property="appData"
												styleClass="upload"></html:file>


										</div>



									</div>


								</div>


								<div class="col-xs-6 col-sm-6 col-md-6">
									Version:

									<div class="form-group">

										<div class="input-group">

											<html:text styleId="version" property="version"
												styleClass="form-control">
											</html:text>

											<span class="input-group-addon info"><span
												class="fa fa-inbox"></span></span>
										</div>
									</div>




								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">
									Application image preview upload:

									<div class="form-group">


										<div class="col-xs-8" style="padding: 0px">
											<input id="uploadImg" placeholder="Choose File"
												class="form-control" disabled="disabled" />
										</div>

										<div class="fileUpload btn btn-primary">
											<span>Upload</span>
											<html:file styleId="appimage" styleClass="upload"
												property="appImage"></html:file>


										</div>



									</div>





								</div>



								<div class="col-xs-6 col-sm-6 col-md-6">
									Require OS:

									<div class="form-group">

										<div class="input-group">

											<html:text styleId="requireos" property="requireOS"
												styleClass="form-control"></html:text>

											<span class="input-group-addon success1"><span
												class="fa fa-cogs"></span></span>
										</div>
									</div>




								</div>
								<div class="col-xs-12">

									Description:
									<html:textarea property="description" styleClass="form-control"
										style="height:100px" styleId="description"></html:textarea>



								</div>
							</div>
							<div class="panel-footer">

								<html:submit styleClass="btn btn-success">Update App</html:submit>
							</div>
						</div> 
					</div>
				</div>




			</html:form>
<script type="text/javascript">
				document.getElementById("appavatar").onchange = function() {
					document.getElementById("uploadAvt").value = this.value;
				};
				document.getElementById("appdata").onchange = function() {
					document.getElementById("uploadFile").value = this.value;
				};
				document.getElementById("appimage").onchange = function() {
					document.getElementById("uploadImg").value = this.value;
				};
			</script>
			<script>
				$("#appimage").attr("multiple", "");
				$("#price").prop("type", "number");
				$("#price").attr("step", "any");

				$("#uploadForm")
						.submit(
								function(event) {
									//disable the default form submission
									event.preventDefault();

									//grab all form data  
									var formData = new FormData($(this)[0]);

									$
											.ajax({
												url : 'updateAppAction.jms?appid=${requestScope.appid}',
												type : 'POST',
												data : formData,
												async : true,
												cache : false,
												contentType : false,
												processData : false,
												beforeSend: function(){
													$("#login-box").show();
												},
												success : function(returndata) {
													$("#login-box").hide();
													if (returndata == "success") {
														alert(returndata);
														window.location.href = 'getAppDetail.jms?appid=${requestScope.appid}';
													} else {
														alert(returndata);
													}

												}
											});

									return false;
								});
				function getAppDetail(appid) {
					$
							.ajax(
									{
										type : "POST",
										url : "/Struts_1.3_WebApp_FrameWork/getDetail.jms",
										data : {
											appid : appid
										}
									})
							.done(
									function(msg) {
										if (msg == 'error') {
											alert("Error on get information. Try again later.");
										} else {
											var obj = $.parseJSON(msg);
											$('#appName').val(obj.name);
											$('#price').val(obj.price);
											$('#description').val(
													obj.description);
											$('#requireos').val(obj.requireos);
											$('#version').val(obj.version);
										}
									});
				}
				$(document).ready(function() {
					getAppDetail("${requestScope.appid}");
				});
			</script>

		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>